<template>
  <div :class="className" :style="{height:height,width:width}" >
  </div>

</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { postBody } from "@/utils/httpUtil";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    },
    selectQueItem:Object
  },
  data() {
    return {
        chart: null,
        baseData:{},
        optionLabelsAndValue:[],
        optionLabels:[],
    }
  },
  mounted() {
      if(this.selectQueItem){
          this.$nextTick(() => {
              this.initChart()
          })
      }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {
      selectQueItemId(){
          if(this.selectQueItem){
              return this.selectQueItem.id
          }else{
              return null
          }

      },
  },
  watch: {
        selectQueItemId(newV, oldV) {
            if(newV){
                this.NLP_show = false
                if(this.selectQueItem.type === 'head'){
                    this.optionLabelsAndValue = []
                    this.optionLabels=[]
                    this.$notify({
                        title: '提示',
                        message: '章节项无统计',
                        type: 'warning',
                        duration: 2000
                    })
                }else if(this.selectQueItem.type === 'textarea'){
                    this.optionLabelsAndValue = []
                    this.optionLabels=[]
                    this.$notify({
                        title: '提示',
                        message: '文本题将所有用户所填内容进行关键字智能分析，形成词云',
                        type: 'warning',
                        duration: 4000
                    })
                }else{
                    let data_legend=[]
                    if(this.selectQueItem){
                        if(this.selectQueItem.options.length>0){
                            data_legend = this.getDataLegend(this.selectQueItem.options,data_legend)
                        }
                    }
                    this.getCountValue()
                    this.optionLabels =  data_legend
                }

            }
        },

  },
  methods: {
       getCountValue(){
           this.optionLabelsAndValue = [];
           let rowData = {};
           rowData.itemId__equal =  this.selectQueItem.id;
           let url = "/quUserQues/getCountValue";
           postBody(url, rowData).then(resp => {
               if(resp.result) {
                   let remap = resp.data
                   for(let kk in remap){
                       let seriesName =this.baseData[kk];
                       let seriesValue = remap[kk];
                       let count_value = { value: seriesValue, name: seriesName };
                       this.optionLabelsAndValue.push(count_value)
                   }

                   this.$nextTick(() => {
                       this.initChart()
                   })
               } else {
                   this.$notify({
                       title: '提示',
                       message: '数据编辑失败！'+resp.msg,
                       type: 'warning',
                       duration: 2000
                   })
               }
           })
      },
      getDataLegend(oldArr,newArr){
          oldArr.forEach((item, index) => {
              newArr.push(item.label);
              this.baseData[item.id] = item.label

              if(item.children && item.children.length>0){
                this.getDataLegend(item.children,newArr)
              }
          })
          return newArr
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: this.optionLabels
          },
          series: [
            {
              name: '选项比例',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: this.optionLabelsAndValue,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
    }
  }
}
</script>
